Základní dlaždice obalená stínem, vhodná k použití na světlé pozadí.
< div class="row"
>
< div
class="col-lg-... d-flex align-items-stretch">
< div class="card card--shadow w-100"
>
< div class="card-body"
>
< /div
>
< /div
>
< /div
>
< /div
>
Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12)
d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu
Základní dlaždice beze stínu, vhodná například na tmavé pozadí.
< div class="row"
>
< div
class="col-lg-... d-flex align-items-stretch">
< div class="card w-100"
>
< div class="card-body"
>
< /div
>
< /div
>
< /div
>
< /div
>
Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12)
d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu
Základní dlaždice s rámečkem po stranách, vhodé pro středové odělení borderem. Dávat na středovou dlaždici, dvě po stranách musí být bez borderu: .card > .card--boderd__sides < .card
< div class="row"
>
< div
class="col-lg-... d-flex align-items-stretch">
< div class="card card--border__sides w-100"
>
< div class="card-body"
>
< /div
>
< /div
>
< /div
>
< /div
>
Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12)
d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu
Základní dlaždice obalená borderem. Vhodé pro vyznačení důležíté dlaždice
< div class="row"
>
< div
class="col-lg-... d-flex align-items-stretch">
< div class="card card--border w-100"
>
< div class="card-body"
>
< /div
>
< /div
>
< /div
>
< /div
>
Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12)
d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu
Základní dlaždice obalená fialovým borderem, vhodné pro vyznačení důležité dlaždice, u které chceme, aby si jí uživatel povšimnul jako první.
< div class="row"
>
< div
class="col-lg-... d-flex align-items-stretch">
< div class="card card--border__purple w-100"
>
< div class="card-body"
>
< /div
>
< /div
>
< /div
>
< /div
>
Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12)
d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu
Základní dlaždice s šedým pozadím, vhodené na bílé a velmi světlé podklady.
< div class="row"
>
< div
class="col-lg-... d-flex align-items-stretch">
< div class="card card--bg__gray w-100"
>
< div class="card-body"
>
< /div
>
< /div
>
< /div
>
< /div
>
Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12)
d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu
Základní dlaždice s průhledným pozadím, vhodná k využití na místech kde by defaultní bílé pozadí kazilo vzhled designu.
< div class="row"
>
< div
class="col-lg-... d-flex align-items-stretch">
< div class="card card--transparent w-100"
>
< div class="card-body"
>
< /div
>
< /div
>
< /div
>
< /div
>
Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12)
d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu
Základní dlaždice s průhledným pozadím, vhodná k využití na místech kde by defaultní bílé pozadí kazilo vzhled designu avšak potřebujeme její obsah viditelně oddělit od zbytku obsahu.
< div class="row"
>
< div
class="col-lg-... d-flex align-items-stretch">
< div class="card card--transparent card--shadow w-100"
>
< div class="card-body"
>
< /div
>
< /div
>
< /div
>
< /div
>
Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12)
d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu